<!DOCTYPE html>
<html>

<head>
    <title>modile端头条</title>
    <!--  1. 设置视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,
        maximum-scale=1.0,minimum-scale=1.0
        ">
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        html {
            font-size: 62.5%;
            --themeColor: #d23f42;

            /* font-size:10%; */
            /* 
                基本的单位 rem 1rem = 10px 
                100vw 整个屏幕的宽度
                10vw 10%的屏幕的宽度
                100vh 整个屏幕的高度
                10vh 10%的屏幕的高度
                */
        }
    </style>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!--移动端主体结构开始 -->
    <section class="tt-m-index">
        <section class="tt-m-header">
            <section class="header-message">邮件</section>
            <section class="header-title">头条</section>
            <section class="header-search">搜索</section>
        </section>
        <section class="tt-m-add">
            +
        </section>
        <!-- 分类开始 -->
        <section class="tt-m-nav">
            <section class="nav-box">
                <a class="nav-left-item">推荐</a>
                <a class="nav-left-item">科技</a>
                <a class="nav-left-item">汽车</a>
                <a class="nav-left-item">体育</a>
                <a class="nav-left-item">时尚</a>
                <a class="nav-left-item">养生</a>
                <a class="nav-left-item">故事</a>
            </section>
        </section>
        <!-- 分类结束 -->
        <!-- 列表开始 -->
        <section class="tt-m-list">
        </section>
        <!-- 列表结束 -->
    </section>
    <!--移动端主体结构结束 -->
</body>
<!-- 
    根据屏幕的大小 动态改变 根字体的大小

 -->
<script src="./js/setRem.js"></script>
<script src="./js/zepto.js"></script>
<script>
    $.ajax({
        type: "post",
        url: "http://tt.linweiqin.com/api/tt/getArticles",
        data: {
            lastid: 0,
            page: 0,
            number: 20
        },
        dataType:"json",// 设置返回的 dataType 为 json
        success(data, status, xhr) {
            console.log(xhr);
            console.log(data);
            let articles = data.articles;
            console.log(articles);
            let items_html = articles.map(v=>{
                return  `
                <a href="./transfer.html?nid=${v.nid}" class="list-item">
                    <section class="title">${v.title}</section>
                    <section class="date">${v.created_at}</section>
                </a>
                `
            })
            $('.tt-m-list').append(items_html);
        },
        error(xhr, errorType, error) {
            console.log(error);
        },
        complete(xhr, status) {
            console.log(status);
        }
    })
</script>

</html>